<template>
  <div>
    <div class="searchCheck">
      <li v-if="conditionType==0" v-for="(item,index) in otherPrams[classifyData.key]" :key="index"
          @click="halderItem(item)">
        {{item.columnName}}
      </li>
      <li v-if="conditionType==1" v-for="(item,index) in selectFemaleCateList" :key="index" @click="halderItem(item)">
        {{item.columnName}}
      </li>
      <li v-if="conditionType==2" v-for="(item,index) in selectManCateList" :key="index" @click="halderItem(item)">
        {{item.columnName}}
      </li>
    </div>

    <div class="categoryBox">
      <div class="categoryList" v-if="classifyData.layoutType == 3"
           v-for="(cateItem,cateIndex) in classifyData.children" :key="cateIndex">
        <h2><img
          src="http://ssfk-media01.oss-cn-shenzhen.aliyuncs.com/user/10002/1523436727040/96262a02eae1ac33a5ed54d1a1a6db3b">{{cateItem.name}}
        </h2>
        <ul>
          <li v-for="(subItem,index) in cateItem.children" :key="index" :class="{active:subItem.checked}"
              @click="halderItem(subItem)">
            {{subItem.name}}
          </li>
        </ul>
      </div>
      <div class="categoryList" v-if="classifyData.layoutType == 2"
      >
        <ul>
          <li :class="{active:cateItem.checked}"
              @click="halderItem(cateItem)" v-for="(cateItem,cateIndex) in classifyData.children" :key="cateIndex">
            {{cateItem.name}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState, mapMutations, mapActions} from "vuex";
  import {cateAction} from "@/store/funnames";

  export default {
    props: {
      classifyData: {
        type: Object
      },
      conditionType: {
        default: 0
      }
    },
    data() {
      return {
        checkList: []
      }
    },
    computed: {
      ...mapState('cate', ['otherPrams', 'selectFemaleCateList', 'selectManCateList']),
    },
    methods: {
      ...mapMutations("cate", {
        updateCate: cateAction.ACTION_UPDATE_CATE
      }),
      ...mapActions("cate", ['getGoodsCount']),
      halderItem(item) {
        if (this.$wx.isArrayEmpty(this.checkList)) {
          if (this.conditionType == 0) {
            this.checkList = this.otherPrams[this.classifyData.key]
            if (this.$wx.isArrayEmpty(this.checkList)) {
              this.checkList = []
            }
          } else if (this.conditionType == 1) {
            this.checkList = this.selectFemaleCateList
          } else if (this.conditionType == 2) {
            this.checkList = this.selectManCateList
          }
        }
        console.log(this.checkList, 123)
        item.checked = !item.checked;
        if (item.name == '全部') {//处理'全部'的情况
          if (item.checked) {
            for (let i = 0; i < this.checkList.length; i++) {
              const tempItem = this.checkList[i]
              if (item.value == tempItem.parentId) {
                tempItem.checked = false
                this.checkList.splice(i, 1)
                i--
              }
            }
            this.checkList = this.checkList.concat(item);
          } else {
            this.checkList.splice(this.checkList.indexOf(item), 1);
          }
        } else {
          if (item.checked) {
            if (this.conditionType == 1 || this.conditionType == 2) {
              for (let i = 0; i < this.checkList.length; i++) {//删除‘全部’item
                const tempItem = this.checkList[i]
                if (item.parentId == tempItem.value) {
                  tempItem.checked = false
                  this.checkList.splice(i, 1)
                  i--
                }
              }
            }
            this.checkList = this.checkList.concat(item);
          } else {
            this.checkList.splice(this.checkList.indexOf(item), 1);
          }
        }
        console.log(this.checkList, this.classifyData.key)
        this.updateCate({key: this.classifyData.key, data: this.checkList, type: this.conditionType});
        this.getGoodsCount({})
        this.$root.$eventHub.$emit('requestGoods', true)
      }
    }
  };
</script>

<style>
  .card {
    padding: 10px;
  }
</style>
